<template>
    <div class="map" ref="baiduRef"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const baiduRef = ref()
const map = ref()
const point = ref()

function initMap (lng = 116.391063, lat = 39.969708) {
    map.value = new BMap.Map(baiduRef.value);
    point.value = new BMap.Point(lng, lat);
    
    map.value.centerAndZoom(point.value, 19);
    map.value.enableScrollWheelZoom(true); //滚轮缩放
}
function addmarker(lng, lat,icon){
    let marker;
    if(icon){
        marker = new BMap.Marker(new BMap.Point(lng,lat),{
            icon: new BMap.Icon(icon, new BMap.Size(30,33))
        })
    }else{
        marker = new BMap.Marker(new BMap.Point(lng,lat))
    }
    map.value.addOverlay(marker)
    return marker
}
onMounted(() => {
    initMap()
    addmarker(116.391063,39.969708)
})
</script>
<style lang="scss" scoped>
.map {
    width: 100%;
    height: 5.85rem
}
</style>